import { Animated, useColorScheme, StyleSheet } from 'react-native'
import React from 'react'
import { Ionicons } from '@expo/vector-icons';
import { useAnimatedStyle, withSpring } from 'react-native-reanimated';
import { Colors } from 'react-native-ui-lib';

interface IIconByTabBarProps {
  routeItem: Record<string, React.ComponentProps<typeof Ionicons>['name']>; route: string; color: string; focused: boolean; size: number
}
const IconByTabBar: React.FC<IIconByTabBarProps> = ({ routeItem, route, color, focused, size }) => {
  const animatedViewConfig: React.ComponentProps<typeof Animated.View> = {
    style: useAnimatedStyle(() => ({
      transform: [{ scale: withSpring(focused ? 1.1 : 1) }],
    })),
  };

  const iconConfig: React.ComponentProps<typeof Ionicons> = {
    name: routeItem[route] ?? "home",
    color: useColorScheme() == 'dark' ? (focused ? Colors.black : Colors.grey30) : (focused ? Colors.white : Colors.grey40),
    size: size,
    style: {
      paddingHorizontal: focused ? 3 : 0,
      borderRadius: focused ? 10 : 0,
      backgroundColor: useColorScheme() == 'dark' ? (focused ? Colors.grey80 : Colors.transparent) : (focused ? Colors.grey10 : Colors.transparent),
    },
  };

  return (
    <Animated.View {...animatedViewConfig}>
      <Ionicons {...iconConfig} />
    </Animated.View>
  )
}

const styles = StyleSheet.create({
  IoniconsFocusedTrue: {
    paddingHorizontal: 3,
    borderRadius: 10,
  },
  IoniconsFocusedFalse: {
  }
});

export default IconByTabBar